import React, { useState, useRef } from 'react'
import classnames from 'classnames'
import { PlayCircleFilled, PauseCircleFilled } from '@ant-design/icons'
import { Button, Form, DatePicker } from 'antd'
import { useDispatch, useSelector } from 'react-redux'
import { createDispatch } from './config'
import moment from 'moment'

const Index = () => {
  const [start, setStart] = useState(false)
  const [width, setWidth] = useState('0px')
  const proess = useRef(null)
  const { startDate, endDate } = useSelector((state) => state.datePickerReducer)

  const dispatch = useDispatch()

  const onStart = () => {
    setStart(true)
  }
  const onStop = () => {
    setStart(false)
    setWidth(proess.current.clientWidth + 'px')
  }
  const reduxYB = () => {
    // dispatch 第一个参数如果是对象的话,那么就不需要异步中间件
    // dispatch 第一个参数如果是回调函数的话,回调函数的第一个参数就是dispatch,用来派发任务的,可以在回调函数里面写异步程序,不过要事先准备好redux的异步中间件
    dispatch(createDispatch)
  }
  const onFinish = (values) => {
    console.log(values)
  }
  return (
    <div>
      <Button onClick={reduxYB}>redux异步</Button>
      <div className="proess-layout">
        <div className="proess" style={{ position: 'relative' }}>
          <div
            className={classnames('proess-content', {
              start,
            })}
            ref={proess}
            style={{ width }}
          ></div>
          <div
            className="proess-border"
            onMouseDown={(e) => {
              document.onmousemove = function (event) {
                // 获取当前鼠标按下的距离页面左侧的距离
                // 在获取移动后鼠标距离页面左侧的距离
                // 移动后的距离页面左侧的距离 - 鼠标按下时距离页面左侧的距离 = 当前进度条的宽度

                // 注意:这边需要减去进度条的宽度,因为当你拖拽完之后,在进行拖拽的时候,还是需要获取最开始的鼠标按下时距离页面左侧的距离的
                // 所以当再次按下的时候,获取的是 进度条的宽度 + 最开始鼠标按下时距离页面左侧的距离

                // eslint-disable-next-line radix
                let barleft = event.clientX - (e.clientX - parseInt(width))
                setWidth(barleft + 'px')
              }
              document.onmouseup = function () {
                document.onmousemove = null // 弹起鼠标不做任何操作
              }
            }}
          ></div>
        </div>
        {React.createElement(start ? PauseCircleFilled : PlayCircleFilled, {
          onClick: start ? onStop : onStart,
          className: 'proess-button',
        })}
      </div>
      <Form name="DateForm" onFinish={onFinish}>
        <Form.Item name="startDate" label="开始">
          <DatePicker
            disabledDate={(date) => {
              const startDate = moment(date).valueOf()
              if (!endDate) {
                return false
              }
              return startDate >= endDate
            }}
            onChange={(value) => {
              dispatch({ type: 'startDate', payload: moment(value).valueOf() })
            }}
          />
        </Form.Item>
        <Form.Item name="endDate" label="结束">
          <DatePicker
            disabledDate={(date) => {
              const endDate = moment(date).valueOf()
              if (!startDate) {
                return false
              }
              return startDate >= endDate
            }}
            onChange={(value) => {
              dispatch({ type: 'endDate', payload: moment(value).valueOf() })
            }}
          />
        </Form.Item>
        <Form.Item>
          <Button htmlType="submit">表单ok</Button>
        </Form.Item>
      </Form>
    </div>
  )
}

export default Index
